<template>
	<Gantt
		:borders="borders"
		:cellHeight="cellHeight"
		:tasks="tasks"
		:links="links"
		:scales="scales"
		:columns="columns"
		@save="save"
		@store="store = $event"
	/>
</template>

<script>
	import Gantt from "../assets/trial-vue-gantt";
	import { getData } from "../common/data";
	import { RestDataProvider } from "../assets/gantt-data-provider";

	const url = "http://192.168.15.171:3000";

	export default {
		components: {
			Gantt,
		},

		props: ["borders", "cellHeight"],

		data() {
			this.server = new RestDataProvider(url, {
				task: (id, obj) => {console.log(id, obj);return this.store.updateTask(id, obj, true)},
				link: (id, obj) => {console.log(id, obj);return this.store.updateLink(id, obj, true)},
			});
			this.server.getData().then(data => {
				this.tasks = data.tasks;
				this.links = data.links;
			});

			const { columns, scales } = getData();

			return {
				columns,
				scales,
				tasks: [],
				links: [],
				store: null,
			};
		},

		methods: {
			save(data) {
				console.log("🚀 ~ file: GanttBackend.vue:51 ~ save ~ data:", data)
				this.server.saveData(data);
			},
		},
	};
</script>
